<html>

<head>
    <title>
        {{title}}
    </title>
</head>

<body>
    <h1>我是注册页面</h1>
    <form>
        <input type="text" id="username" name="username">
        <input type="password" id="password" name="password">
        <input type="email" id="email" name="email">
        <div id="error"></div>
        <button class="btn" type="submit">注册</button>
    </form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
    var username = $('#username');
    var password = $('#password');
    var email = $('#email');
    var error = $('#error');
    var btn = $('.btn');
    $('form').submit(function(event) {
        event.preventDefault();
        var user = $.trim(username.val());
        var userlen = user.length;
        if (userlen == 0) {
            error.text('用户名不能为空').show();
            return false;
        }
        if (userlen < 5) {
            error.text('用户名不能小于5个字符').show();
            return false;
        }
        var pass = $.trim(password.val());
        var passlen = pass.length;
        if (passlen == 0) {
            error.text('密码不能为空').show();
            return false;
        }
        if (passlen < 6) {
            error.text('密码不能小于6个字符').show();
            return false;
        }
        var emailStr = $.trim(email.val());
        if (emailStr.length == 0) {
            error.text('邮箱不能为空').show();
            return false;
        }
        btn.attr('disabled', true);
        btn.attr('disabled', true);
        $.ajax({
            url: '/register',
            type: 'POST',
            dataType: 'json',
            data: {
                password: pass,
                username: user,
                email: emailStr
            },
            complete: function() {
                btn.attr('disabled', false);
            },
            success: function(data) {
                if (!data.success)
                    error.text(data.message).show();
                else
                    location.href = '/login';
            }
        });
    });
});
</script>

</html>